<template>
  <el-dialog v-model="uiTestCatFormDialogVisible" :title="uiTestCatFormDialogTitle" width="600" draggable>
    <el-form ref="uiTestCatFormRef" :model="uiTestCatFormData" :rules="uiTestCatRules" label-width="130px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="项目名称:">
            <el-input style="width: 100%;"
                      disabled
                      v-model="currentProject"
                      >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上级模块名称:">
            <el-input style="width: 100%;"
                      disabled
                      v-model="uiTestCatFormData.parentLabel"
                      >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="模块名称:" prop="label">
            <el-input ref="uiTestCatNameRef" style="width: 100%;"
                      v-model="uiTestCatFormData.label"
                      placeholder=请输入模块名称>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="">取消</el-button>
        <el-button type="primary" :loading="loading" @click="commitUiTestCatFrom(uiTestCatFormRef)">确定
        </el-button>
      </div>
    </template>

  </el-dialog>
</template>

<script setup>

import {nextTick, reactive, ref} from "vue";
import {storeToRefs} from "pinia";
import {ElMessage} from "element-plus";
import {useProjectStore} from "@/stores/modules/project/project.js";
import {postUiTestCatApi} from "@/api/modules/ui/uitest.js";
import {useUiTestStore} from "@/stores/modules/ui/uitest.js";

const uiTestStore = useUiTestStore()
const projectStore = useProjectStore()
const {currentProject,currentProjectId} =storeToRefs(projectStore)

const emits = defineEmits(["clearSearch"])

const uiTestCatFormDialogVisible = ref(false)
const uiTestCatFormDialogTitle = ref("")
const uiTestCatFormData = ref({
  project:"",
  parentId:"",
  parentLabel:""
})
const uiTestCatRules = reactive({
  label: [{required: true, message: "请输入模块名称", trigger: "blur"}],
});

const uiTestCatNameRef = ref()
// 打开模态框
const showUiTestCatFrom = (formType, uiTestCat = undefined) => {
  uiTestCatFormDialogVisible.value = true
  if (formType === "create") {
    uiTestCatFormDialogTitle.value = "新增模块"
    if (uiTestCat){
      uiTestCatFormData.value.parentId = uiTestCat.id
      uiTestCatFormData.value.parentLabel = uiTestCat.label
      uiTestCatFormData.value.project = currentProjectId.value
    }

  }
  if (formType === "update") {
    uiTestCatFormDialogTitle.value = "编辑模块"
  }
  // 打开模态框后，自动聚焦到模块名输入框
  nextTick(()=>{
    setTimeout(()=>{
      uiTestCatNameRef.value.focus()
    },300)
  })
}

const uiTestCatFormRef = ref()
const loading = ref(false);
// 提交表单
const commitUiTestCatFrom = (formEl) => {
  if (!formEl) return;
  formEl.validate(async valid => {
    if (!valid) return;
    loading.value = true;
    try {
      postUiTestCatApi(uiTestCatFormData.value).then(res=>{
        ElMessage.success("成功")
        uiTestCatFormDialogVisible.value = false
        uiTestStore.getUiTestCatTree()
        emits("clearSearch")
      })

    } finally {
      loading.value = false;
    }
  })
}

// 关闭模态框
const cancelUiTestCatFrom = () => {

}

defineExpose({
  showUiTestCatFrom
})

</script>

<style scoped lang="scss">

</style>
